<template>
  <div>
    <tab-control :titles="titles" @titleClick="titleClick"></tab-control>
    <h2>{{ contents[currentIndex] }}</h2>
  </div>
</template>

<script>
import TabControl from "./TabControl.vue";

export default {
  data() {
    return {
      currentIndex: 0,
      titles: ["衣服", "鞋子", "裤子"],
      contents: ["衣服界面", "鞋子界面", "裤子界面"],
    };
  },
  components: { TabControl },
  methods: {
    titleClick(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style scoped></style>
